extends layout
block content
    #app
        p {{ message }}
        p {{ message | capitalize }}
        //- | 是管道符的意思, 过滤器
append scripts
    script.
        var app = new Vue({
            el: '#app',  // 现在数据和 DOM 已经被绑定在一起, 所有的元素都是响应式的
            data: {
                message: 'hello vue!'  // app.message='hello jrp', 在浏览器 console 中可以进行修改
            },
            filters: {
                capitalize: function(value) {
                    if (!value) return ''
                    value = value.toString()
                    return value.charAt(0).toUpperCase() + value.slice(1)  // 首字母大写
                }
            }
        })
